<template>
    <!-- 外围最大的盒子 -->
    <div class="executes">
      <div class="box">
        <!--图片地图区域 -->
        <div class="woimg" v-if="inif.myimage != ''">
          <img
            id="myone"
            :src="'data:image/png;base64,' + inif.myimage"
            :style="{
              width: inif.width * 0.4 + 'px',
              height: inif.height * 0.4 + 'px',
            }"
          />
            <!-- 车辆的实时位置 -->
            <img
              id="bycar"
              src="../../assets/车辆.png"
              alt=""
              :style="{
  
  
                top: (inif.height - (inif.y / 10.0) / 5 ) * 0.4 + 'px',
                left: ((inif.x / 10.0) / 5) * 0.4 + 'px',
                transform: 'rotate(' + inif.fused_angle + 'deg)',
              }"
            />
            <template>
              <span
                v-for="item in complete"
                :key="item.id * 0.01"
                id="myspan"
                style="pointer-events: none;text-align: center;"
                :style="{
                  width: (item.weizhi.width + 18) * 0.4 + 'px',
                  height: (item.weizhi.height - 13) * 0.4 + 'px',
                  top: item.weizhi.y * 0.4 + 'px',
                  left: item.weizhi.x * 0.4 + 'px',
                  transform: 'rotate(' + item.weizhi.age + 'deg)',
                  transformOrigin: 9  + 'px '+11 + 'px',
                  lineHeight: (item.weizhi.height - 13) * 0.4 + 'px',
                  fontSize: 20 * 0.4 + 'px',
                }"
              >{{item.id}}</span>
            </template>
            <!-- -----------------------当没有点击任何一项时显示全部点位数据 ((list.y - 168) * num) / 10  
                            top: (inif.height - (item.y / 10.0 - inif.newy * 100.0) / 5 - 1) *  0.4 + 'px',
                left: ((item.x / 10.0 - inif.newx * 100) / 5) * 0.4 + 'px',------------------------- -->
  
                <template v-for="(item, index) in robot">
              <!--充电点图片 -->
              <img
                v-if="item.type == 3"
                @click="select(item)" 
                :key="index * 0.15"
                id="bycar"
                src="../../assets/maiwei.zip.png"
                alt=""
                :style="{
                  width: 30 * 0.4 + 'px',
                  height: 30 * 0.4 + 'px',
                  top:
                  (inif.height-(item.y / 10.0) / 5) * 0.4 +
                  'px',
                left: ((item.x / 10.0) / 5) * 0.4 + 'px',
                  transform: 'rotate(' + item.fused_angle + 'deg)',
                }"
              />
              <!-- 显示全部库位点区域     -->
              <span
                v-if="item.type != 3"
                @click="select(item)" 
                :key="item.id"
                id="span"
                :class="activeItem === list ? 'active' : '' "
                :style="{
                  lineHeight: 20 * 0.4+ 'px',
                  fontSize: 16 * 0.4 + 'px',
                  width: 20*0.4 + 'px',
                  height: 20*0.4 + 'px',
                  top: (inif.height-(item.y / 10.0) / 5) * 0.4 +
                  'px',
                left: (((item.x / 10.0) / 5)) * 0.4 + 'px',
                }"
                >{{ item.id }}</span
              >
            </template>

        </div>
        <!--右侧执行任务区域      -->
        <div class="mycontent" v-if="inif.myimage!=''">
          <van-button
            v-for="(item, index) in list"
            :key="index"
            @click="addtask(item, index+1)"
            :class="[{ active: activeItem === item }]"
            >{{ item }}</van-button
          >

        </div>
      </div>
    </div>
  </template>
  
  <script>
  // 导入yaml格式进行获取到数据的转换
  import yaml from "js-yaml";
  //导入获取库位点列表接口
  import { gainApi } from "@/api/record";
  //导入封装好的路线编辑数据接口
  import { geteditorsApi } from "@/api/editors";
  export default {
    data() {
      return {
        taskList:{
          task_list:[],
          task_state:1,
          task_id:101,
          task_percent:0.6999999999,
        },
        activeItem: "", //选中颜色高亮的类名
        show: false, //充电点和待命点的显示和隐藏
        list: [
          "回待命点",
          "充电",
          "点到点任务",
          "点到列任务",
          "列到点任务",
          "列到列任务",
        ],
        spotshow: false, //控制点到点面板的显示和隐藏
        listShow: false, //控制点到列面板显示和隐藏
        Thirdly: false, //控制列到列面板显示和隐藏
        Fourth: false, //控制列到点任务页面的显示和隐藏
        recharge: false, //控制充电点任务页面的显示和隐藏
        Standby: false, //控制回待命点页面的显示和隐藏
        clickitem: "", //保存点击的下标
        newIndex: "", //保存点击的下标
        newItem: "", //保存点击的内容
        robot: [], //保存库位点的数组变量
        complete: [], //保存路线编辑的数组变量
        inif: {
          myimage: "", //保存图片
          width: "", //图片宽度
          height: "", //图片的高度
          newx: "", //圆点x轴坐标
          newy: "", //圆点y轴坐标
          x: "", //车辆x轴坐标
          y: "", //车辆y轴坐标
          fused_angle: "", //车辆角度
        },
  
      //th
      option: {
          column: [
            {
              label: '房台类型',
              prop: 'roomType'
            },
            {
              label: '已结',
              prop: 'closedAccount'
            },
            {
              label: '未收款',
              prop: 'noAccount'
            },
            {
              label: '赠送',
              prop: 'givePrice'
            },
            {
              label: '合计',
              prop: 'totalPrice'
            }
          ]
        },
      };
    },
    // 注册组件
    components: {
      //   //点到点组件
      Son: () => import("./components/dot.vue"),
      // 点到列组件
      Arrange: () => import("./components/arrange.vue"),
      //   //列到列组件
      Thirdly: () => import("./components/thirdly.vue"),
      //   //列到点组件
      Fourth: () => import("./components/fourth.vue"),
      //   // 充电组件
      Recharge: () => import("./components/recharge.vue"),
      //   //回待命点任务
      Standby: () => import("./components/standby.vue"),
    },
    created() {
      this.gain(); //获取地图方法
      this.getrecord(); //获取库位点方法
      this.geteditors(); //获取路线数据方法
    },
    //注册点击事件
    methods: {
      select(item) {
        console.log(item)
        this.clickitem = item;
      },
  
      //点击任务的每一项的事件
      addtask(item, index) {
        //保存点击的这一项数据到变量中
        this.activeItem = item;
        if (item == "回待命点") {
          this.newIndex = index;
          // 把回待命点组件显示
          this.Standby = true;
          // 把充电组件隐藏
          this.recharge = false;
          // 把点到点组件状态改为隐藏
          this.spotshow = false;
          //把点到列组件隐藏
          this.listShow = false;
          // 把列到列组件隐藏
          this.Thirdly = false;
          //把列到点组件隐藏
          this.Fourth = false;
        } else if (item == "充电") {
          console.log(22);
          // 把充电组件显示
          this.recharge = true;
          // 把点到点组件状态改为隐藏
          this.spotshow = false;
          // 把回待命点隐藏
          this.Standby = false;
          //把点到列组件隐藏
          this.listShow = false;
          // 把列到列组件隐藏
          this.Thirdly = false;
          //把列到点组件隐藏
          this.Fourth = false;
        } else if (item == "点到点任务") {
          // 把点到点组件状态改为显示
          this.spotshow = true;
          // 把回待命点隐藏
          this.Standby = false;
          // 把充电组件隐藏
          this.recharge = false;
          //把点到列组件隐藏
          this.listShow = false;
          // 把列到列组件隐藏
          this.Thirdly = false;
          //把列到点组件隐藏
          this.Fourth = false;
          // 把点击的这一项名字赋值给name
        } else if (item == "点到列任务") {
          //把点到列变量改为true显示
          this.listShow = true;
          // 把回待命点隐藏
          this.Standby = false;
          // 把充电组件隐藏
          this.recharge = false;
          //把点到点组件隐藏
          this.spotshow = false;
          // 把列到列组件隐藏
          this.Thirdly = false;
          //把列到点组件隐藏
          this.Fourth = false;
        } else if (item == "列到点任务") {
          //把列到点组件显示
          this.Fourth = true;
          // 把回待命点隐藏
          this.Standby = false;
          // 把充电组件隐藏
          this.recharge = false;
          // 把列到列组件隐藏
          this.Thirdly = false;
          // 把点到点组件隐藏
          this.spotshow = false;
          // 把点到列组件隐藏
          this.listShow = false;
        } else if (item == "列到列任务") {
          // 把列到列组件显示
          this.Thirdly = true;
          // 把回待命点隐藏
          this.Standby = false;
          // 把充电组件隐藏
          this.recharge = false;
          // 把点到点组件隐藏
          this.spotshow = false;
          // 把点到列组件隐藏
          this.listShow = false;
          //把列到点组件隐藏
          this.Fourth = false;
        }
        this.newIndex = index;
        this.newItem = item;
        console.log(this.newIndex);
      },
  
      // -------------------------------------------------------------------------------获取地图信息的方法
      gain() {
        let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
        //     let ws = new WebSocket("ws://192.168.20.101:10009");
        ws.onmessage = (e) => {
          //使用箭头函数改变this的指向
          //当服务器有消息，就会自动调用这个函数
          //e.data有服务器返回的数据
          const res = yaml.load(e.data); //使用yaml格式进行转换
          if (res.uri == "/sirius/topics/slam_grid_map") {
            //判断res中的uri路劲是不是等于有图片的路径
            this.inif.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
            this.inif.width = res.info.width; //保存宽度
            this.inif.height = res.info.height; //保存高度
            this.inif.newx = res.info.origin.position.x;
            this.inif.newy = res.info.origin.position.y;
          } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
            this.inif.x = res.fused_x; //保存获取到的x轴坐标
            this.inif.y = res.fused_y; //保存获取到的y轴坐标
            this.inif.fused_angle = res.fused_angle;
            // console.log(this.inif.x, this.inif.y, "坐标");
          } else if (res.uri == "/sirius/topics/task_status_new_bee") {
            this.taskList = res
          }
        };
      },
  
      //------------------------------------------------------------------------获取库位点接口请求
      async getrecord() {
        let res = await gainApi();
        let newres = yaml.load(res.data);
        console.log(newres, "测试数据");
        if (res.data.msg !== "successed" && newres !== undefined) {
          //转换成对象键值对形式
          // 定义一个数组用来解构
          let one = [];
          //将转换好的对象追加到robot数组中
          one.push(newres);
          // 把最外层的数组给解构出来
          let flattened = [].concat.apply([], one);
          //赋值给robot数组
          this.robot = flattened;
        }
      },
  
      //-------------------------------------------------------------------------获取路线编辑的方法请求
      async geteditors() {
        let res = await geteditorsApi(); //发送请求获取数据
        if (res.data.msg != "successed") {
          this.complete = yaml.load(res.data); //定义一个新的变量
        }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .executes {
    position: fixed;
    top: 70px;
    margin-top: 20px;
    width: 100%;
    height: 100vh;
    background-color: #12151a;
    .box {
      display: flex;
      margin: 0px auto;
      height: 850px;
      .woimg {
        flex: 1;
        // border: 2px solid black;
        overflow: hidden;
        display: flex;
        ::v-deep .van-image__img {
          width: auto !important;
        }
        #myone {
          position: relative;
        }
  
        #mianspan {
          line-height: 38px;
          text-align: center;
          border-radius: 50%;
          background-color: #00d1d1;
          position: absolute;
        }
        #myspan {
    width: 35px;
    height: 35px;
    border: 2px solid #00d1d1;
    border-radius: 20px;
    position: absolute;
    top: 200px;
    left: 100px;
    color: rgb(10, 0, 1);
    background-color: #ddd9;
    font-weight: 900;
  }
  
        // 库位点样式
        #span {
          font-size: 14px;
          line-height: 8px;
          text-align: center;
          width: 8px;
          height: 8px;
          position: absolute;
          background-color: #feed9d;
          border: 2px solid #aca485;
          &.active {
            background-color: red;
          }
        }
        #bycar {
          width: 20px;
          height: 30px;
          position: absolute;
        }
      }
      .mycontent {
        background-color: #12151a;
        height: 100%;
        // flex: 1;
        width: 320px;
        .van-button {
          margin: 0 5px 10px;
          background-color: #1a1c25;
          width: 150px;
          height: 35px;
          color: #fff;
          font-size: 18px;
          border: none;
          border-radius: 10px;
          &.active {
            background-color: #3bbabd;
            color: #fff;
            font-weight: 700;
          }
        }
        .pulldown {
          margin-top: 10px;
          font-size: 40px;
          ::v-deep .van-dropdown-menu__title {
            position: relative;
            box-sizing: border-box;
            max-width: 100%;
            padding: 0 163px;
          }
          // ::v-deep .van-dropdown-menu__item {
          //   display: flex;
          //   flex: 1;
          //   align-items: center;
          //   justify-content: center;
          //   width: 200px !important;
          //   cursor: pointer;
          //   background-color: skyblue !important;
          // }
          // .van-dropdown-menu {
          //   position: relative;
          //   padding: 0 10px;
          //   margin-bottom: 20px;
          //   width: 200px !important;
          //   .van-icon {
          //     position: absolute;
          //     top: 5px;
          //     left: 20px;
          //     span {
          //       font-size: 16px;
          //       color: black;
          //       margin-left: 10px;
          //     }
          //   }
          // }
        }
  
        .button {
          margin: 0 80px;
        }
        .recharge {
          margin-top: 30px;
          .van-dropdown-menu {
            position: relative;
            padding: 0 10px;
            margin-bottom: 20px;
            .van-icon {
              position: absolute;
              top: 5px;
              left: 20px;
              span {
                font-size: 16px;
                color: black;
                margin-left: 10px;
              }
            }
          }
          ::v-deep .van-dropdown-menu__title {
            position: relative;
            box-sizing: border-box;
            max-width: 100%;
            padding: 0 163px;
          }
        }
      }
    }
  }
  
  .condition {
    border: 3px solid #282c3b;
    width: 300px;
    height: 400px;
    margin: 0 10px;
    background-color: yellow;
    .head {
      font-size: 20px;
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid red;
    }
  }
  .tasks{
    font-size: 22px;
    color: #fff;
    padding: 10px 20px;
  }
  </style>
  